<template>
  <TodoHeader @addTodo="handleAddTodo"></TodoHeader>
  <TodoMain
    :todos="todos"
    @toggleDone="handleToggleDone"
    @toggleEdit="handleToggleEdit"
    @changeContent="handlehangeContent"
    @del="handleDel"
  >
  </TodoMain>
  <TodoFooter
    @delDone="handleDelDone"
    @delAll="handleDelAll"
    :todos="todos"
    @allDone="handleAllDone"
  ></TodoFooter>
</template>

<script setup>
import { ref, onMounted, watch } from 'vue';

import TodoHeader from './components/TodoHeader.vue';
import TodoMain from './components/TodoMain.vue';
import TodoFooter from './components/TodoFooter.vue';

const todos = ref([]);

const handleAddTodo = (todo) => {
  todos.value.push(todo);
  console.log(todos.value);
};

const handleToggleDone = (id) => {
  const todo = todos.value.find((todo) => todo.id == id);
  todo.done = !todo.done;
  console.log(todo); //Proxy代理对象
};

const handleToggleEdit = (id) => {
  const todo = todos.value.find((todo) => todo.id == id);
  todo.edit = !todo.edit;
};

const handlehangeContent = (e, id) => {
  const todo = todos.value.find((todo) => todo.id == id);
  todo.content = e.target.value; /* target代表具体触发事件的元素:input */
  handleToggleEdit(id); //再切换一下元素的可编辑状态
};

const handleDel = (id) => {
  const index = todos.value.findIndex((todo) => todo.id == id);
  todos.value.splice(index, 1);
};

const handleDelDone = () => {
  todos.value = todos.value.filter((todo) => todo.done == false);
};
const handleDelAll = () => {
  todos.value = [];
};

const handleAllDone = (value) => {
  todos.value.forEach((todo) => (todo.done = value));
};

watch(
  todos,
  () => {
    localStorage.setItem('localTodos', JSON.stringify(todos.value));
  },
  { deep: true }
);

onMounted(() => {
  const localTodos = JSON.parse(localStorage.getItem('localTodos') || '[]');
  todos.value = localTodos;
});
</script>

<style scoped>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
</style>
